<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/searchfixed.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <title>固定费-查询</title>
</head>
<style>
    .layui-form-select{
        margin-right: 10px;
    }
</style>
<body>
<form class="top layui-form">
    <div class="top_left">
        <div class="sels layui-form-item">
            <span>日期：</span>
            <div class="layui-inline" style="margin-right: 10px;">
                <input type="text" name="stars" placeholder="选择日期" class="layui-input"  id="t1">
            </div>
            <span>~</span>
            <div class="layui-inline">
                <input type="text" name="ends" placeholder="选择日期" class="layui-input" id="t2">
            </div>
        </div>
        <div class="sels layui-form-item">
            <span>项目选择：</span>
            <div class="layui-input-inline">
                <select id="prts" xm-select="prts" xm-select-show-count="1" name="prts" class="valid">

                </select>
            </div>
        </div>
        <div class="sels layui-form-item">
            <span>分表：</span>
            <select name="status" lay-verify="" lay-search="">
                <option value="1">项目管理人员工资</option>
                <option value="2">社保费</option>
                <option value="3">其他费用</option>
                <option value="4">经营管理费</option>
            </select>
        </div>
        <!--<div class="sels layui-form">
            <span>项目序号：</span>
            <input type="text" class="layui-input" placeholder="输入序号" style="margin-right: 10px;width: 100px;">
            <span>~</span>
            <input type="text" class="layui-input" placeholder="输入序号" style="width: 100px;">
        </div>-->
        <div class="sels layui-form-item">
            员工编号费用编号：
            <div class="layui-inline">
                <input name="b_num" type="text" autocomplete="off" class="layui-input" placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            人员名称：
            <div class="layui-inline">
                <input name="b_name" type="text" autocomplete="off" class="layui-input" placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            关键字搜索：
            <div class="layui-inline">
                <input name="s_note" type="text" autocomplete="off" class="layui-input" placeholder="备注">
            </div>
        </div>
    </div>
    <div>
        <button type="button" lay-submit="" lay-filter="seach" class="layui-btn">搜索</button>
        <button type="button" onclick="exports()" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出</button>
    </div>
</form>
<div id="search" class="tabs">
    <table cellpadding="0" cellspacing="0" id="searchFixed" style="font-weight: bold">
        <tr>
            <td>序号</td>
            <td>项目序号</td>
            <td>操作</td>
            <td>填写日期</td>
            <td>填表人</td>
            <td>员工编号<br/>费用编号</td>
            <td>人员姓名<br/>名称</td>
            <td>岗位星际<br/>支出内容</td>
            <td>基数（单位）<br/>年薪/社保费</td>
            <td>系数<br/>数量</td>
            <td>单价/日薪</td>
            <td>金额</td>
            <td>职务使用人员</td>
            <td>备注</td>
        </tr>
        <tr v-if="status == 1 || status == 2" v-for="(item, index) in arrList">
            <td>{{item.id}}</td>
            <td>{{item.project_id}}</td>
            <td>
                <span @click="editor(item.id,item.staff_id, index)" class="operation">编辑</span>
                <span @click="del(item.id,item.staff_id)" class="operation">删除</span>
            </td>
            <td>{{item.createtime}}</td>
            <td>{{item.user_name}}</td>
            <td>{{item.yg_num}}</td>
            <td>{{item.yg_name}}</td>
            <td>{{item.yg_star}}</td>
            <td>{{item.unit}}</td>
            <td>{{item.num}}</td>
            <td>{{item.money}}</td>
            <td>{{item.total}}</td>
            <td>{{item.yg_position}}</td>
            <td>{{item.note}}</td>
        </tr>
        <tr v-if="status == 3" v-for="(item, index) in arrList">
            <td>{{item.id}}</td>
            <td>{{item.project_id}}</td>
            <td>
                <span @click="editor(item.id,item.staff_id, index)" class="operation">编辑</span>
                <span @click="del(item.id,item.staff_id)" class="operation">删除</span>
            </td>
            <td>{{item.createtime}}</td>
            <td>{{item.user_name}}</td>
            <td>{{item.fy_num}}</td>
            <td>{{item.fy_name}}</td>
            <td>{{item.spend}}</td>
            <td>{{item.unit}}</td>
            <td>{{item.num}}</td>
            <td>{{item.price}}</td>
            <td>{{item.total}}</td>
            <td>{{item.usepeople}}</td>
            <td>{{item.note}}</td>
        </tr>
        <tr v-if="status == 4" v-for="(item, index) in arrList">
            <td>{{item.id}}</td>
            <td>{{item.project_id}}</td>
            <td>
                <span @click="editor(item.id,item.staff_id, index)" class="operation">编辑</span>
                <span @click="del(item.id,item.staff_id)" class="operation">删除</span>
            </td>
            <td>{{item.createtime}}</td>
            <td>{{item.user_name}}</td>
            <td>{{item.fee_number}}</td>
            <td>{{item.fee_name}}</td>
            <td>{{item.spend}}</td>
            <td>{{item.unit}}</td>
            <td>{{item.num}}</td>
            <td>{{item.price}}</td>
            <td>{{item.total}}</td>
            <td>{{item.usepeople}}</td>
            <td>{{item.note}}</td>
        </tr>
    </table>
</div>
<div id="demo8"></div>
<div class="x-body" id="opens" style="display: none;padding-top: 10px">
    <form class="layui-form">
        <div v-hide="status == 4" class="layui-form-item ipts">
            <span>名称 ：</span>
            <div class="layui-inline">
                <select name="ren_name" id="ren_name" lay-search="">
                </select>
            </div>
        </div>
        <div class="layui-form-item ipts">
            <span>单位（基数）：</span>
            <div class="layui-inline">
                <input type="text" id="unit" value="" name="unit" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ipts">
            <span>数量（系数）：</span>
            <div class="layui-inline">
                <input type="text" id="num" value="" onkeyup="value=value.replace(/[^\d.]/g,'')" name="num" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ipts">
            <span>备注 ：</span>
            <div class="layui-inline">
                <input type="text" id="note" value="" name="note" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn ipts_btn" type="button" lay-filter="modify" lay-submit="">
                修改
            </button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script src="../../layui/formSelects-v4.js"></script>
<script>
    var vm = new Vue({
        el: '#search',
        data: {
            token: '',
            page: 1,
            limit: 12,
            arr: [],//项目列表
            ids:'',
            staff_id:'',//外键id
            arrList:[],//数据
            status:1,//分表标识
            project_id: '',
            start: null,
            end: null,
            bian_num: null,
            bian_name: null,
            permissions:'',
            cindex: '' //当前操作下标
        },
        created: function () {
            this.arr = JSON.parse(sessionStorage.getItem('project'));
            this.project_id = sessionStorage.getItem('projectopt');
            this.initData();
        },
        methods: {
            initData:function () {
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                var obj = {
                    project_id: this.project_id,
                    status: this.status,
                    page: this.page,
                    limit: this.limit,
                    start: this.start,
                    end: this.end,
                    bian_num: this.bian_num,
                    bian_name: this.bian_name
                }
                $.when(PUATTRBUTE.REQUESTFUN('api/Fixedcha/fixedindex', obj).done(function(res){
                    layer.close(load);
                    if(res.code == 1){
                        vm.arrList = res.data.list;
                        if(vm.page == 1){
                            vm.initpage(res.data.count);
                        }
                    }else{
                        if(res.msg == "暂无权限"){
                            vm.permissions= 1 ;
                        }
                        vm.initpage(0);
                        layer.msg(res.msg, {time: 1000, icon:2});
                    }
                }))
            },
            editor:function (id,staff_id, xid) {
                this.cindex = xid;
                this.ids = id;
                this.staff_id = staff_id;
                var obj = {
                    project_id: this.project_id
                }
                var mechanical = "",
                    url = '';
                if (this.status == 1 || this.status == 2){
                    url = 'api/Classify/staffindex'
                }else if(this.status == 3){
                    url = 'api/Classify/otherindex'
                }
                $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                        if (res.code == 1) {
                            sessionStorage.setItem('staff', JSON.stringify(res.data.list));
                            var arr = res.data.list;
                            mechanical += '<option value="">请选择</option>';
                            if(vm.status == 1 || vm.status == 2){
                                for (item in arr) {
                                    mechanical += '<option   value="' + arr[item].id + '">' + arr[item].yg_name + '</option>'
                                }
                            }else if(vm.status == 3){
                                for (item in arr) {
                                    mechanical += '<option   value="' + arr[item].id + '">' + arr[item].fy_name + '</option>'
                                }
                            }
                            $("#ren_name").append(mechanical);
                            layui.form.render();
                            var obj = {
                                id: id,
                                project_id:vm.project_id
                            };
                            var editUrl = '';
                            if(vm.status == 1){
                                editUrl = 'api/Projectmoney/xiangmumoneyedit';
                            }else if(vm.status == 2){
                                editUrl = 'api/Social/shebaomoneyedit';
                            }else if(vm.status == 3){
                                editUrl = 'api/Othermoney/othermoneyedit';
                            }else if(vm.status == 4){
                                editUrl = 'api/Businessmoney/businessmoneyedit';
                            }
                            $.when(PUATTRBUTE.REQUESTFUN(editUrl, obj).done(function(res){
                                    if(res.code == 1){
//                            var select = 'dd[lay-value="' + res.data.yg_num + ',' + res.data.yg_star + ',' + res.data.id + '"]';// 设置value
                                        if(vm.status ==3){
                                            var select = 'dd[lay-value="' + res.data.other_id + '"]';// 设置value
                                            $('#ren_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                        }else{
                                            var select = 'dd[lay-value="' + res.data.staff_id + '"]';// 设置value
                                            $('#ren_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                        }
                                        $("#unit").val(res.data.unit);
                                        $("#num").val(res.data.num);
                                        $("#note").val(res.data.note);
                                        layui.form.render('select');
                                    }else{
                                        layer.msg(res.msg, {time: 1000, icon: 2})
                                    }
                                })
                            );
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )

                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '380px'], //宽高
                    title: '修改',
                    content: $("#opens"),
                    cancel: function(){
                        $('#ren_name').html("");
                    }
                });
            },
            //删除
            del: function (id,staff_id) {
                var obj = {
                    id: id,
                    project_id:this.project_id
                }
                var delUrl = '';
                if(this.status == 1){
                    delUrl = 'api/Projectmoney/xiangmumoneydel';
                }else if(this.status == 2){
                    delUrl = 'api/Social/shebaomoneydel';
                }else if(this.status == 3){
                    delUrl = 'api/Othermoney/othermoneydel';
                }else if(this.status == 4){
                    delUrl = 'api/Businessmoney/businessmoneydel';
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                });
                layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.when(PUATTRBUTE.REQUESTFUN(delUrl, obj).done(function(res){
                            layer.close(load);
                            layer.closeAll();
                            if(res.code == 1){
                                vm.initData();
                                layer.msg(res.msg, {time: 1000, icon: 1})
                            }else{
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                }, function(){
                    layer.closeAll();
                });
            },
            initpage: function (count) {
                console.log(count)
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: vm.limit
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            }
        }
    })
    layui.use(['form', 'laydate', 'jquery'], function () {
        var form = layui.form,
            laydate = layui.laydate;
        laydate.render({
            elem: '#t1', //指定元素
        })
        laydate.render({
            elem: '#t2', //指定元素
        })
//                form.render();
        var arrs = vm.arr;
        for (var i in arrs) {// 遍历数据赋值给二级列表的内容
            var $content = $('<option value="' + arrs[i].id + '">' + arrs[i].name + '</option>');
            $('#prts').append($content);
        }
        form.render('select');
        layui.formSelects.render();
        layui.formSelects.value('prts', [vm.arr[0].id]);
        //搜索
        form.on("submit(seach)",function(data){
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            vm.project_id = data.field.prts;
            vm.page = 1;
            var obj = {
                start: data.field.stars,
                end: data.field.ends,
                project_id: data.field.prts,
                status: data.field.status,
                bian_num: data.field.b_num,
                bian_name: data.field.b_name,
                note: data.field.s_note,
                page: vm.page,
                limit: vm.limit
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/Fixedcha/fixedindex', obj).done(function(res){
                layer.close(load);
                if(res.code == 1){
                    layer.msg(res.msg, {time: 1000, icon:1});
                    vm.arrList = res.data.list;
                    vm.status = data.field.status;
                    vm.start = data.field.stars;
                    vm.end = data.field.ends;
                    vm.bian_num = data.field.b_num;
                    vm.bian_name = data.field.b_name;
                    if(vm.page == 1){
                        vm.initpage(res.data.count);
                    }
                }else{
                    vm.arrList = [];
                    vm.initpage(0);
                    layer.msg(res.msg, {time: 1000, icon:2});
                }
            }))
        })
        //修改
        form.on("submit(modify)",function(data){
            if (vm.status == 1 || vm.status == 2){
                var obj = {
                    note: data.field.note,
                    unit: data.field.unit,
                    num: data.field.num,
                    project_id: vm.project_id,
                    id : vm.ids,
                    staff_id: data.field.ren_name
                }
            }else if(vm.status == 3){
                 var obj =  vm.arrList[vm.cindex]
                    obj.note = data.field.note;
                    obj.unit = data.field.unit;
                    obj.num = data.field.num;
                    obj.project_id = vm.project_id;
                    obj.other_id = data.field.ren_name;
                    obj.id = vm.ids;
            }else if(vm.status == 4){
                var obj = {
                    note: data.field.note,
                    unit: data.field.unit,
                    num: data.field.num,
                    project_id: vm.project_id,
                    id : vm.ids
                }
            }
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            })
            var url = '';
            if(vm.status == 1){
                url = 'api/Projectmoney/xiangmumoneyeditdo';
            }else if(vm.status == 2){
                url = 'api/Social/shebaomoneyeditdo';
            }else if(vm.status == 3){
                url = 'api/Othermoney/othermoneyeditdo';
            }else if(vm.status == 4){
                url = 'api/Businessmoney/businessmoneyeditdo';
            }
            $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function(res){
                layer.close(load);
                layer.closeAll();
                if(res.code == 1){
                    $('#ren_name').html("");
                    vm.initData();
                    layer.msg(res.msg, {time: 1000, icon:1});
                }else{
                    layer.msg(res.msg, {time: 1000, icon:2});
                }
            }))
        })
    })
    //导出
    function exports() {
        if(vm.permissions == 1){
            layer.alert("抱歉，您没有此权限！")
        }else {
            var tableHtml = $('#searchFixed');
            $(tableHtml).css({
                'border':'1px solid #d5d5d2',
                'text-align':'center',
                'border-collapse':'collapse',
            });
            $(tableHtml).find('tr td').css({
                'text-align':'center',
                'border':'1px solid #d5d5d2',
                'line-height':'30px',
                'padding':'0px 10px',
                'min-width':'100px'
            });
            var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
            $('.table-btn-group').append(urlA);
            urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
            urlA.download = "固定费.xls";
            urlA.click();
        }
    }
</script>
</html>